<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){

            const hobbys = document.getElementsByName("hobby")
            
            const allbtn = document.getElementById("all")
            allbtn.onclick = function(){
                for(let num = 0; num < hobbys.length; num++){
                    hobbys[num].checked = true
                }
                checkallbox.checked = true
                
            }

            const nobtn = document.getElementById("no")
            nobtn.onclick = function(){
                for(let num = 0; num < hobbys.length; num++){
                    hobbys[num].checked = false
                }
                checkallbox.checked = false
            }

            const oppobtn = document.getElementById("oppo") 
            oppobtn.onclick = function(){
                for(let num = 0; num < hobbys.length; num++){
                    hobbys[num].checked = !hobbys[num].checked
                }

                const checkedbox = document.querySelectorAll("[name=hobby]:checked")
                    if(checkedbox.length === hobbys.length){
                        checkallbox.checked = true
                    }else{
                        checkallbox.checked = false
                    }
                
            }

            const subbtn = document.getElementById("sub")
            subbtn.onclick = function(){

                for(let num = 0; num < hobbys.length; num++)
                    // if(hobbys[num].checked){
                    //     alert(hobbys[num].value)
                    // }
                    hobbys[num].checked && alert(hobbys[num].value) //代码比较少 两者都可以
            }

            const checkallbox = document.getElementById("check-all")

            checkallbox.onchange = function(){
                for(let num = 0; num < hobbys.length; num++){
                    // hobbys[num].checked = checkallbox.checked
                    hobbys[num].checked = this.checked
                }
                
            }

            for(let num = 0; num < hobbys.length; num++){
                hobbys[num].onchange = function(){
                    const checkedbox = document.querySelectorAll("[name=hobby]:checked")
                    if(checkedbox.length === hobbys.length){
                        checkallbox.checked = true
                    }else{
                        checkallbox.checked = false
                    }
                }
            }
            
        }
    </script>
</head>
<body>
    <div>
        <form action="#">
            <div>
                请选择你的爱好：
                <input type="checkbox" id = "check-all"/>全选
                
            </div>

            <div>
                <input type="checkbox" name = "hobby" value="乒乓球" />乒乓球
                <input type="checkbox" name = "hobby" value="篮球" />篮球
                <input type="checkbox" name = "hobby" value="羽毛球" />羽毛球
                <input type="checkbox" name = "hobby" value="足球" />足球
            </div>

            <div>
                <button type="button" id="all">全选</button>
                <button type="button" id="no">取消全选</button>
                <button type="button" id="oppo">反选</button>
                <button type="button" id="sub">提交</button>
            </div>
        </form>
    </div>
</body>
</html>